<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/public/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/public/css/public.css}" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
        .layui-card-body {
            line-height: 35px;
        }
    </style>
</head>
<body>

<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">菜单权限</div>
                <div class="layui-card-body">
                    <div id="ID-tree-demo"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">按钮权限</div>
                <div class="layui-card-body">
                    <div class="layui-form" id="buttonForm">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script th:src="@{/public/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['tree','layer','util','form',"jquery"], function () {
        let tree = layui.tree;
        let layer = layui.layer;
        let util = layui.util;
        let form = layui.form,$ = layui.jquery;

        let resSet = new Set();
        const roleId = '[[${roleId}]]';

        $.get('/system/resource/list?roleId=' + roleId,function(res){
            console.log("系统资源-=====>" , res)
            // 渲染
            tree.render({
                elem: '#ID-tree-demo',
                data: res,
                showCheckbox: true,  // 是否显示复选框
                onlyIconControl: true,  // 是否仅允许节点左侧图标控制展开收缩
                id: 'permission',
                isJump: true, // 是否允许点击节点时弹出新窗口跳转
                click: function(obj){
                    var data = obj.data;  //获取当前点击的节点数据
                    // layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
                    console.log(data);
                    getButtonResource(data.field);
                },
                oncheck: function(obj){
                    console.log(obj.data); // 得到当前点击的节点数据
                    console.log(obj.checked); // 节点是否被选中
                    console.log(obj.elem); // 得到当前节点元素
                }
            });
        })

        // checkbox 事件
        form.on('checkbox(checkbox-filter)', function(data){
            var elem = data.elem; // 获得 checkbox 原始 DOM 对象
            var value = elem.value; // 获得 checkbox 值

            if(elem.checked){
                resSet.add(parseInt(value));
                console.log("add")
            }else{
                resSet.delete(parseInt(value));
                console.log("delete")
            }

            console.log(resSet)
        });

        // 获取菜单下的按钮资源
        function getButtonResource(menuCode) {
            //先清除之前的缓存
            $('#buttonForm').html("");

            $.get('/system/resource/button_resource?menuCode=' + menuCode + '&roleId='+roleId, function (res) {
                if(res.code === 200) {
                    res.data.forEach(function (item) {
                        let html = '<input style="margin:0.2em" type="checkbox" lay-filter="checkbox-filter" name="resources" value="'+ item.id +'" title="'+ item.title +'"';
                        html+= item.checked ? " checked >" : ">";
                        if(item.checked) {
                            resSet.add(item.id)
                        }
                        $('#buttonForm').append(html);
                    });
                    form.render();
                }
            });
        }

        function getChecked(ids, data) {
            for (let i = 0; i < data.length; i++) {
                ids.push(data[i].id)
                if (data[i].children) {
                    getChecked(ids, data[i].children)
                }
            }
        }

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var checkData = tree.getChecked('permission');
            console.log(checkData)
            let ids = [];
            //获取菜单ID
            getChecked(ids, checkData);
            //获取按钮ID
            resSet.forEach(value => ids.push(value))
            $.post("/system/resource/edit_permission",{"ids":ids,"roleId":roleId}, function (res) {
                if (res.code === 200) {
                    layer.msg("设置权限成功!", {icon: 1, time: 1000}, function () {
                        // let iframeIndex = parent.layer.getFrameIndex(window.name);
                        // parent.layer.close(iframeIndex);
                    });
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000});
                }
            });

            return false;
        });

    });
</script>
</body>
</html>